<template>
	<view style="margin-top: 10px;">
		<view v-for="(component, index) in components" :key="index">
			<view class="uni-list-cell" style="margin-top: 5%;">
				<view class="uni-list-cell-db">
					<text style="line-height: 100rpx;color: red;">选择工单:</text>
					<picker
						style="line-height: 100rpx;color: #BEBEBE;font-size: 32rpx; padding-left: 200px;margin-top: -50px;padding-top: -100px;"
						@change="pick($event,index)" mode='selector' :value="components[index].index" disabled
						:range="components[index].array" class='listPicker'>
						<view>{{ buka }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view v-for="(deviceId, index) in deviceIdList" :key="index">
			<view class="uni-list-cell" style="margin-top: 5%;">
				<view class="uni-list-cell-db">
					<text style="line-height: 100rpx;color: red;">选择机器序列号:</text>
					<picker
						style="line-height: 100rpx;color: #BEBEBE;font-size: 32rpx; padding-left: 200px;margin-top: -50px;padding-top: -100px;"
						@change="pick($event,index)" mode='selector' :value="components[index].index" disabled
						:range="components[index].array" class='listPicker'>
						<view>{{ deviceId1 }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-padding-wrap">
			<text style="line-height: 100rpx;color: red;">日期：</text>
			<view class="uni-title"
				style="line-height: 100rpx;color: #BEBEBE;font-size: 32rpx; padding-left: 200px;margin-top: -50px;padding-top: -100px;">
				{{clockdate}} {{clocktime}}
			</view>
		</view>
		<uni-popup v-if="yesOK" class="popup-layout" ref="popup_ref" type="bottom" :maskClick="false">
			<view class="popup-opera-layout">
				<view class="popup-opera-left" @tap="datePickerCancel">
					取消
				</view>
				<view class="popup-opera-center">
					选择日期
				</view>
				<view class="popup-opera-right" @tap="datePickerConfirm">
					确定
				</view>
			</view>
			<picker-view class="popup-view-layout" :value="defaultValue" :indicator-style="indicatorStyle"
				@change="datePickerChange">
				<picker-view-column>
					<view class="popup-view-item" v-for="(item,index) in  datePickerObj.yearArr" :key="index">{{item}}年
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="popup-view-item" v-for="(item,index) in datePickerObj.monthArr" :key="index">{{item}}月
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="popup-view-item" v-for="(item,index) in datePickerObj.dayArr" :key="index">{{item}}日
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="popup-view-item" v-for="(item,index) in datePickerObj.dayArr" :key="index">{{item}}点
					</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>

		<view class="cell-left">
			<view class="cell-text" style="color: red;">
				*补卡缘由说明：</view>
		</view>
		<view class="cell-left" style="margin-left: 30px;">
			<view class="cell-text">
				<Textarea disabled v-model="contentText" ref="content" style="border: 1px solid #ccc;" pl="请在此处输入说明"
					:len='200'></Textarea>
			</view>
		</view>
		<view class="content">
			<!--组件位置-->
			<mianBan :list='list' @upload="upload"></mianBan>
		</view>
		<view style="margin-top: 20px;" v-if="reason != '' && reason != null">
			<view class="cell-left" style="margin-top: 20px;color: red;">
				<view class="cell-text">驳回理由：</view>
			</view>
			<view class="cell-left" style="margin-left: 30px;">
				<view class="cell-text">
					<Textarea v-model="reason" ref="content" style="border: 1px solid #ccc;" disabled :len='200'>
						</Textarea>
				</view>
			</view>
		</view>
		<!-- <view class="button"><button @click="onsubmit">提交</button></view> -->
	</view>
</template>

<script>
	import mianBan from '@/components/mianBan.vue';
	import amap from '@/static/js/amap-wx.130.js';
	export default {
		data() {
			var curDate = new Date()
			var datePickerObj = {
				yearArr: [],
				monthArr: [],
				dayArr: [],
				hoursArr: [],
				curYear: curDate.getFullYear(),
				curMonth: curDate.getMonth() + 1,
				curDay: curDate.getDate(),
				curHours: curDate.getHours(),
			}

			for (let i = 2020; i <= curDate.getFullYear(); i++) {
				datePickerObj.yearArr.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				datePickerObj.monthArr.push(i)
			}

			for (let i = 1; i <= 31; i++) {
				datePickerObj.dayArr.push(i)
			}

			for (let i = 1; i <= 24; i++) {
				datePickerObj.hoursArr.push(i)
			}

			return {
				deviceIdList: [],
				deviceId1: '',
				reason: '',
				contentText: '',
				clocktime: '',
				clockdate: '',
				buka: '',
				yesOK: false,
				datePickerObj,
				defaultValue: [datePickerObj.yearArr[datePickerObj.yearArr.length - 1],
					datePickerObj.curMonth - 1, datePickerObj.curDay - 1
				],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync()
				    .screenWidth / (750 / 100))}px;`,
				dateObj: {
					nian: '',
					yue: '',
					ri: '',
					shi: '',
				},
				components: [],
				amapPlugin: null,
				gaodekey: 'a65ca3f7e4c4cf0f17d64768ce74a85e', //高德key,此处的key需要去高德平台申请获取，此key是假的！！！
				address: "", // 已经获取到的位置
				approvalStatus: '完成',
				approvalStatus1: '完成',
				approvalStatus2: '未完成',
				list: [{
					name: '审批未通过',
					ishow: false,
					list: [],
				}]
			}
		},

		components: {
			mianBan
		},
		onReady() {
			this.components.push({
				price: 0,
				imageData: '',
				selectedOption: '',
				array: ['qqqq', 'wwww', 'eeee'],
				index: 0,
				matchMedia: '',
			});
			this.deviceIdList.push({
				price: 0,
				imageData: '',
				selectedOption: '',
				array: ['qqqq', 'wwww', 'eeee'],
				index: 0,
				matchMedia: '',
			});
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			this.deviceId1 = this.item.deviceid
			this.buka = this.item.workid
			this.clocktime = this.item.clocktime
			this.clockdate = this.item.clockdate
			this.contentText = this.item.reason
			this.reason = this.item.rejectReason
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "发起人",
				main: "",
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批人员",
				main: "",
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批待审批人员",
				main: "",
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批通过人员",
				main: "",
				succes: false
			})
			this.list[0].list.push({
				time: this.item.applicationtime,
				name1: "审批已驳回人员",
				main: "",
				succes: false
			})
			if (this.item.applicationstatus == '已通过') {
				this.list[0].name = "审批已通过"
				this.list[0].ishow = true
				this.list[0].list[3].succes = true
				this.list[0].list[3].main = "1"
				this.list[0].list[3].time = this.item.transitTime
			}
			if (this.item.applicationstatus == '待审批') {
				this.list[0].name = "审批未通过"
				this.list[0].list[2].succes = true
				this.list[0].list[2].main = "1"
			}
			if (this.item.applicationstatus == '已驳回') {
				this.list[0].name = "审批未通过"
				this.list[0].list[4].succes = true
				this.list[0].list[4].main = "1"
				this.list[0].list[4].time = this.item.transitTime
			}


		},
		methods: {
			//下拉框赋值
			pick(e, index) {
				this.components[index].index = e.target.value;
				if (e.target.value == 0) {
					this.components[index].Hidden = true;
				} else {
					this.components[index].Hidden = false;
				}
			},
			selectChange(event, index) {
				// 下拉框选项改变时更新数据
				// console.log("没进来吗")
				// console.log(this.components[0].options)
				this.components[index].options.value = event.detail.value;
			},
			datePickerChange(e) {
				var that = this;
				let cMonth;
				let cYear;
				console.log(e);
				let val = e.detail.value;
				cYear = that.datePickerObj.yearArr[val[0]];
				cMonth = that.datePickerObj.monthArr[val[1]];
				that.datePickerObj.curDay = that.datePickerObj.dayArr[val[2]];
				that.datePickerObj.curMonth = cMonth;
				that.datePickerObj.curYear = cYear;
				that.datePickerObj.dayArr = [];
				if (cMonth || y) {
					if (cMonth == 1 || cMonth == 3 || cMonth == 5 || cMonth == 7 ||
						cMonth == 8 || cMonth == 10 || cMonth == 12) {
						for (let i = 1; i <= 31; i++) {
							that.datePickerObj.dayArr.push(i)
						}
					} else if (cMonth == 4 || cMonth == 6 || cMonth == 11 || cMonth == 9) {
						for (let i = 1; i <= 30; i++) {
							that.datePickerObj.dayArr.push(i)
						}
					} else if (cMonth == 2) {
						if (that.datePickerObj.curYear % 4 == 0 &&
							(that.datePickerObj.curYear % 100 != 0 ||
								that.datePickerObj.curYear % 400 == 0)) {
							for (let i = 1; i <= 29; i++) {
								that.datePickerObj.dayArr.push(i)
							}
						} else {
							for (let i = 1; i <= 28; i++) {
								that.datePickerObj.dayArr.push(i)
							}
						}
					}

				}
			},
			dateClick() {
				this.yesOK = true;
			},
			datePickerCancel() {
				this.yesOK = false;
			},
			datePickerConfirm() {
				this.dateObj.nian = this.datePickerObj.curYear;
				this.dateObj.yue = this.datePickerObj.curMonth;
				this.dateObj.ri = this.datePickerObj.curDay;
				this.dateObj.shi = this.datePickerObj.curHours;
				this.yesOK = false;
			},
			upload(item, i) {
				/* 打开一个关闭另外一个
				这里逻辑如果不同请自行修改 */
				this.list.forEach((val, index) => {
					if (i == index) {
						val.ishow = true
					} else {
						val.ishow = false
					}
				})
			},
			//获取坐标
			getLocation() {
				const _this = this;
				this.amapPlugin = new amap.AMapWX({
					key: this.gaodekey
				});
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '当前定位');

						_this.address =
							`${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;

						// _this.address 可根据自己的实际情况修改
						_this.address = `${data[0].regeocodeData.formatted_address}`;
						// 传出
						_this.$emit("lodAddress", _this.address)
						uni.hideLoading();
					},
					// 获取位置失败
					fail: (err) => {
						uni.showToast({
							title: "获取位置失败，请重启小程序",
							icon: "error"
						})
					}
				});
			},
			onsubmit() {
				this.amapPlugin = new amap.AMapWX({
					key: this.gaodekey
				});
				this.getLocation();
			}
		}
	}
</script>

<style lang="less" scoped lang="scss">
	.popup-layout {
		position: absolute;
		bottom: 0;
		width: 100vw;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background-color: #FFFFFF;
	}

	.popup-opera-layout {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20px 15px;
		border-bottom: black solid 1px;
	}

	.popup-opera-left {
		color: white;
		font-size: 13px;
		text-align: center;
		border-radius: 8px;
		padding: 5px 20px;
		background-color: #BEBEBE;
	}

	.popup-opera-center {
		color: #333333;
		font-size: 17px;
		text-align: center;
		border-radius: 8px;
	}


	.popup-opera-right {
		color: #FFFFFF;
		font-size: 13px;
		text-align: center;
		border-radius: 8px;
		padding: 5px 20px;
		background-color: #1cb419;
	}


	.popup-view-layout {
		background-color: #EEEEEE;
		width: 100%;
		height: 150px;
	}

	.popup-view-item {
		line-height: 50px;
		text-align: center;
		font-size: 17px;
		text-align: center;
	}

	page {
		background-color: #F8F8F8;
	}

	.button {
		margin-top: 120rpx;

		button {
			background-color: #11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}

	.color1 {
		color: #55ff7f;
	}

	.color2 {
		color: red;
	}
</style>